<template>
	<!-- 	<u-popup v-model="show" mode="center" :zoom="false" :mask-close-able="false" border-radius="14" width="610rpx">
	 
	</u-popup> -->

	<u-mask :show="show" mode="center" bgColor="transparent" class="flex-column-center"
		style="justify-content: center;">

		<view class="dialog-contianer flex-column-center">
			<view class="title">{{title}}</view>
			<view class="line"></view>
			<view class="message"><text>{{message}}</text></view>
			<view class="line"></view>
			<view class="confrim" @click="leftAction()">我知道了</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		name: "alert",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			isInput: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '盲盒免单'
			},
			message: {
				type: String,
				default: 'white'
			},
			leftText: {
				type: String,
				default: '取消'
			},
			bigBackImage: {
				type: Boolean,
				default: false
			},
			rightText: {
				type: String,
				default: '确认'
			},
			isOneBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputMsg: ''
			};
		},
		methods: {
			leftAction() {
				this.$emit("leftAction")
			},
			rightAction() {
				this.$emit("rightAction", this.inputMsg)
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog-contianer {
		width: 600rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		background: rgba(255, 255, 255, 1);

		.title {
			margin-top: 24rpx;
			font-size: 36rppx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
		}

		.line {
			margin-top: 20rpx;
			width: 100%;
			height: 0rpx;
			border: 1px solid rgba(225, 225, 225, 1);
		}

		.message {
		
			font-size: 26rpx;
			font-weight: 500;
			width: 100%;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.confrim {
			width: 100%;
			height: 102rpx;
			line-height: 102rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
			color: rgba(212, 48, 48, 1);
		}


	}
</style>
